
<template>
  <!--
    elementUI table 强化封装
    /**
      props:
        noFirst       ---- 是否需要第一列（选择框/顺序列）默认：true
        data          ---- 表格数据 (必填)

        fields:
          lable:列名(必填)
          field:字段名(必填)
          slot:是否需要插槽(boolen)(选填)
          width: 列表宽度(选填)
          fixed: 固定列需要使用fixed属性，它接受 Boolean 值或者left、right，表示左边固定还是右边固定。(选填)

        selectable    ---- 是否需要 选择框 (选填) 默认：true;  false 则显示顺序
        border        ---- 是否需要 边框 (选填) 默认：true
        isPagination  ---- 是否需要 分页 (选填) 默认：true
        total         ---- 分页数量
        currentPage   ---- 当前页
        isSelectCurrentRow   ---- 是否单选

      methods：
        @selectChange     ---- 选择框 状态改变回调
        @paginationChange ---- 分页器改变回调

      fileter:
        noNull 非空显示，需要自己写
     */
     @author: LinMing
     @startTime: 2020-09-16
     @endTime: 2020-09-17
   -->
  <div class="lm-table-common">
    <div class="lm-table">
      <el-table
        ref="multipleTable"
        :highlight-current-row="isSelectCurrentRow"
        :row-class-name="tableRowClassName"
        :data="data"
        tooltip-effect="dark"
        :border="border"
        style="width: 99.99%"
        :size="size"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <div v-if="noFirst">
          <el-table-column v-if="selectable" type="selection" align="center" width="55" />
          <el-table-column v-if="!selectable" type="index" align="center" width="55" />
        </div>
        <el-table-column v-for="item in fields" :key="item.field" :sortable="item.sortable" :sort-method="item.sortMethod" :prop="item.field" align="center" :label="item.label" :width="item.width" :fixed="item.fixed">
          <template v-slot="scope">
            <slot v-if="item.slot" :name="item.field" :scope="scope.row" />
            <span v-else>{{ scope.row[item.field] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="isPagination" class="lm-pagination">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :hide-on-single-page="total <= 10"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MingTable',
  // modelValue: {
  //   data: {
  //     type: Array
  //   }
  // },
  props: {
    data: {
      type: Array
    },
    fields: {
      type: Array,
      required: true
    },
    size: {
      type: String,
      default: 'medium'
    },
    pageSize: {
      type: Number,
      default: 10
    },
    selectable: {
      type: Boolean,
      default: false
    },
    isSelectCurrentRow: {
      type: Boolean,
      default: false
    },
    currentPage: {
      type: Number,
      default: 1
    },
    border: {
      type: Boolean,
      default: true
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      required: true
    },
    noFirst: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    highlightArr: {
      type: Array,
      default: Array
    }
  },
  data() {
    return {
    }
  },
  methods: {
    /* 高亮显示 */
    tableRowClassName({ row }) {
      if (+row.highlight === 1 || +row.highlighting === 1) return 'warning-row'
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleCurrentChange(e) {
      this.$emit('currentChange', e)
    },
    handleSelectionChange(e) {
      this.$emit('selectChange', e)
    },
    sizeChange(e) {
    },
    currentChange(currentPage) {
      this.$emit('paginationChange', currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
  .lm-table-common {
    width: 100%;
    .lm-pagination {
      margin-top: 50px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace !important;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
